<template>
  <div>
    <title-item>
      <em slot="title" class="flex">精选音乐视频</em>
      <em slot="text" class="hot-audio-right"
        >&#xe73a;<i class="hot-text">换一批</i></em
      >
    </title-item>
    <slides-2
      :imgs="HomeMusicAudioSong"
      :imgClass="homePageImg"
      :textClass="pageText"
      :swiperOption="swiperOption"
    />
  </div>
</template>
<script>
import TitleItem from "components/content/title/TitleItem.vue";
import Slides2 from "components/common/swiper/Slides2";
export default {
  name: "MusicAudioView",
  components: {
    TitleItem,
    Slides2
  },
  props: {
    HomeMusicAudioSong: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      flag: false,
      homePageImg: "recommend-page-img",
      pageText: "recommend-page-text",
      swiperOption: {
        notNextTick: true,
        //循环
        loop: false,
        //设定初始化时slide的索引
        initialSlide: 0,
        //视图显示个数
        slidesPerView: 3.5,
        // freeMode: true,
        touchRatio: 2, //触摸变慢
        //自动播放
        autoplay: false,
        //滑动速度
        speed: 1000,
        //滑动方向
        direction: "horizontal",
        paginationClickable: true,
        //小手掌抓取滑动
        grabCursor: true,
        //个体类名替换
        slideClass: "my-slide",
        wrapperClass: "my-wrapper",
        //滑动之后回调函数
        on: {
          slideChangeTransitionEnd: function() {
            // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          }
        }
      }
    };
  }
};
</script>
